<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="">
			<view class="flex-col mt-12 list-item" v-for="(item,i) in items">
				<view class="flex-row justify-between items-center group_4">
					<view class="flex-row items-center">
						<text class="font_3 text_6">订单号：</text>
						<text class="font_4">{{item.id}}</text>
					</view>
					<text class="font_5 text_7" v-if="item.orderStatus==0">待付款</text>
					<text class="font_5 text_7" v-if="item.orderStatus==1">超时取消</text>
					<text class="font_5 text_7" v-if="item.orderStatus==2">已支付</text>
					<text class="font_5 text_7" v-if="item.orderStatus==3">已发货</text>
					<text class="font_5 text_7" v-if="item.orderStatus==4">确认收货</text>
					<text class="font_5 text_7" v-if="item.orderStatus==5">申请取消中</text>
					<text class="font_5 text_7" v-if="item.orderStatus==6">已取消</text>
					<text class="font_5 text_7" v-if="item.orderStatus==7">已退款</text>
				</view>
				<view class="flex-row justify-between group_5">
					<view class="flex-row self-center">
						<view class="flex-col justify-start items-center image-wrapper">
							<image class="shrink-0 image-wrapper" :src="item.photoUrlId" />
						</view>
						<view class="ml-12 flex-col group_6">
							<text class="self-start font_6">{{item.shopName}}</text>
							<text class="mt-8 self-start font_7 text_8">x{{item.productNum}}</text>
							<view class="mt-8 flex-col justify-start self-stretch text-wrapper_2">
								<text class="font_8 text_9">{{item.productType}}/{{item.productLevel}}</text>
							</view>
						</view>
					</view>
					<text class="self-start font text_10">￥{{item.totalPrice}}</text>
				</view>
				<view class="flex-row justify-between items-center group_7">
					<view class="flex-row items-baseline">

					</view>
					<view class="flex-row group_8">
						<view class="flex-col justify-start items-center text-wrapper_3" @click="gaibian(item,6)"
							v-if="item.orderStatus==0">
							<text class="font_6 text_12">取消订单</text>
						</view>
						<view class="ml-12 flex-col justify-start items-center text-wrapper_4" @click="tobuy(item)"
							v-if="item.orderStatus==0">
							<text class="font_11 text_13">立即付款</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_3" @click="gaibian(item,5)"
							v-if="item.orderStatus==2">
							<text class="font_6 text_12">申请退款</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_3" v-if="item.orderStatus==3">
							<text class="font_6 text_12">查看物流</text>
						</view>
						<view class="ml-12 flex-col justify-start items-center text-wrapper_4"
							v-if="item.orderStatus==2 || item.orderStatus==3" @click="gaibian(item,4)">
							<text class="font_11 text_13">确认收货</text>
						</view>
						<view class="ml-12 flex-col justify-start items-center text-wrapper_4"
							v-if="item.orderStatus==4">
							<text class="font_11 text_13">评价订单</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待付款'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已取消'
				}],
				current: 0,
				status:0,
				items: []
			}
		},
		
		onLoad(e) {
			if(e.cont==1){
				this.current = 1 
				this.cread(2)
			}else{
				this.cread(0)
			}
		},
		methods: {
			gaibian(e, i) {
				let fromData = JSON.parse(JSON.stringify(e))
				for(let k in fromData){
					if(fromData[k] == null){
						fromData[k] = ''
					}
				}
				let that = this
				uni.showModal({
					title: '确认操作',
					content: '是否确认操作',
					success(res) {
						if (res.confirm) {
							fromData.orderStatus = i
							that.$request('mall/order/edit', fromData).then(res1 => {
								if (res1.msg == '操作成功') {
									uni.showToast({
										title: '操作成功',
										icon: 'none'
									})
									setTimeout(() => {
										that.cread(that.status)
									}, 1000)
								}
							})
						}
					}
				})
			},
			tobuy(e) {
				let that = this
				this.$request('pay/xiaoChengXuMallPay', {
					id: e.id
				}).then(res2 => {
					if (res2.msg == '操作成功') {
						let mood = res2.data
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							timeStamp: mood.timeStamp, // 时间戳
							nonceStr: mood.nonceStr, // 随机字符串
							package: mood.package,
							signType: mood.signType, // 签名算法
							paySign: mood.paySign, // 签名
							success: function(res3) {
								uni.removeStorageSync('shop')
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								setTimeout(() => {
									that.cread()
								}, 1000)
							},
							fail: function(err) {
								console.log('支付失败', err);
							}
						});
					}
				})
			},
			change(index) {
				this.current = index;
				let status = 0
				if (this.current == 0) {
					status = 0
				} else if (this.current == 2) {
					status = 4
				} else if (this.current == 3) {
					status = 6
				} else  if(this.current == 1){
					status = 2
				}
				this.status=status
				
				this.cread(status)
			},
			async cread(e) {
				let res = await this.$request("mall/order/list", {
					status: e
				})
				this.items = res.data
			}
		}
	}
</script>

<style scoped>
	.font {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #333333;
	}

	.list-item {
		padding-left: 24rpx;
		padding-right: 16rpx;
		background-color: #ffffff;
		overflow: hidden;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_4 {
		padding: 32rpx 0;
		border-bottom: solid 2rpx #f8f8f8;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #999999;
	}

	.text_6 {
		line-height: 22.24rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.8rpx;
		color: #666666;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.9rpx;
		color: #2869fe;
	}

	.text_7 {
		margin-right: 4rpx;
		line-height: 26.24rpx;
	}

	.group_5 {
		padding: 24rpx 0;
		border-bottom: solid 2rpx #f8f8f8;
	}

	.image-wrapper {
		background-color: #ffffff;
		border-radius: 8rpx;
		overflow: hidden;
		width: 132rpx;
		height: 132rpx;
	}

	.group_6 {
		margin-top: 4rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.9rpx;
		color: #333333;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 25.9rpx;
		color: #999999;
	}

	.text_8 {
		line-height: 24.76rpx;
	}

	.text-wrapper_2 {
		padding: 12rpx 0;
		background-color: #f3f3f3;
	}

	.font_8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 25.9rpx;
		color: #333333;
	}

	.text_9 {
		margin-left: 16rpx;
		margin-right: 12rpx;
		line-height: 24.94rpx;
	}

	.text_10 {
		margin-top: 100rpx;
	}

	.group_7 {
		padding: 24rpx 0;
	}

	.font_9 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #666666;
	}

	.text_11 {
		line-height: 22.3rpx;
	}

	.font_10 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #ef2222;
	}

	.group_8 {
		margin-right: 8rpx;
	}

	.text-wrapper_3 {
		padding: 16rpx 0;
		border-radius: 64rpx;
		width: 160rpx;
		height: 56rpx;
		border-left: solid 2rpx #f3f3f3;
		border-right: solid 2rpx #f3f3f3;
		border-top: solid 2rpx #f3f3f3;
		border-bottom: solid 2rpx #f3f3f3;
	}

	.text_12 {
		line-height: 25.96rpx;
	}

	.text-wrapper_4 {
		padding: 16rpx 0;
		background-color: #2869fe;
		border-radius: 82rpx;
		width: 160rpx;
		height: 56rpx;
	}

	.font_11 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.9rpx;
		color: #ffffff;
	}

	.text_13 {
		line-height: 26.06rpx;
	}
</style>